p5.js インタラクション
マウスで操作する
code:mouse.js
function setup() {
createCanvas(400, 400);
noCursor();
}
function draw() {
background(200);
line(mouseX, 0, mouseX, height);
line(0, mouseY, width, mouseY);
}
code: pmouse.js
function setup() {
createCanvas(400, 400);
frameRate(5);
}
function draw() {
background(200);
line(mouseX, mouseY, pmouseX, pmouseY);
}
code: mouseIsPressed.js
function setup() {
createCanvas(400, 400);
background(200);
}
function draw() {
if (mouseIsPressed) {
background(255,0,0);
}
else{
background(200);
}
}
code: mouseButton.js
function setup() {
createCanvas(400, 400);
background(200);
}
function draw() {
if (mouseIsPressed) {
if (mouseButton === LEFT) {
background(255,0,0);
}
if (mouseButton === RIGHT) {
background(0,255,0);
}
if (mouseButton === CENTER) {
background(0,0,255);
}
}
}
code: pressed&released.js
let value1 = 0;
let value2 = 0;
function setup() {
createCanvas(400, 400);
background(0);
noStroke();
}
function draw() {
fill(value1);
background(value2);
rect(100, 100, 200, 200);
}
function mousePressed() {
if (value1 === 0) {
value1 = 255;
} else {
value1 = 0;
}
}
function mouseReleased() {
if (value2 === 0) {
value2 = 255;
} else {
value2 = 0;
}
}
マウスで絵を描く
code: draw.js
function setup() {
createCanvas(400, 400);
background(220);
stroke(100,100);
strokeWeight(3);
}
function draw() {
if(mouseIsPressed){
line(mouseX, mouseY, pmouseX, pmouseY);
}
}
キーボードで操作する
code: keypressed.js
let a = 0;
function setup() {
createCanvas(400, 400);
background(200);
noStroke();
rectMode(CENTER);
}
function draw() {
if (keyIsPressed === true) {
fill(255, 255-a, 0);
a = a + 1;
} else {
fill(255, a, 0);
}
rect(width/2, height/2, 200, 200);
}
code: type.js
function setup() {
createCanvas(400, 400);
fill(100);
textSize(50);
}
function draw() {
background(200);
text(key, 30, 60);
}
code: typewriter.js
let x = 30;
let y = 60;
function setup() {
createCanvas(400, 400);
background(200);
fill(100, 100);
textSize(50);
textFont('Futura');
}
function draw() {
}
function keyPressed() {
if (keyCode === RETURN) {
x = 30;
y = y + 60;
}else{
text(key, x, y);
x = x + 40;
}
}
code: switch.js
let red = 0;
let geen = 0;
let blue = 0;
function setup() {
createCanvas(400, 400);
background(200);
noStroke();
rectMode(CENTER);
}
function draw() {
fill(red, green, blue);
rect(width/2, height/2, 200, 200);
}
function keyTyped() {
if (key === 'r') {
red = 255;
green = 0;
blue = 0;
}else if (key === 'g') {
red = 0;
green = 255;
blue = 0;
}else if (key === 'b') {
red = 0;
green = 0;
blue = 255;
}
}
参考文献
p5.js Reference
https://gyazo.com/502ae515d567ef0bffe21179767fc835